<template>
  <div class="person">
    <h1>情况三：监视【reactive】定义的【对象类型】数据</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <h2>汽车：{{ person.car.c1 }}、{{ person.car.c2 }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
    <button @click="changeC1">修改第一台车</button>
    <button @click="changeC2">修改第二台车</button>
    <button @click="changeCar">修改整个车</button>
    <hr>
  </div>
</template>

<script lang="ts" setup name="Person">
  import {ref,reactive,watch} from 'vue'
  // 数据
  let person = reactive({
    name:'张三',
    age:18,
    car:{
      c1:'奔驰',
      c2:'宝马'
    }
  })
  // 方法
  function changeName(){
    person.name += '~'
  }
  function changeAge(){
    person.age += 1
  }
  function changeC1(){
    person.car.c1 = '奥迪'
  }
  function changeC2(){
    person.car.c2 = '大众'
  }
  function changeCar(){
    person.car = {c1:'雅迪',c2:'爱玛'}
  }
  function changePerson(){
   	// person = { name: '李四', age: 80 }//直接修改，不行
  	// person = reactive({ name: '李四', age: 80 })//reactive包裹修改，也不行
    Object.assign(person,{name:'李四',age:80})//本质上替换了原person的每个属性值
   
  }
  //监视多个对象属性变化
  watch([()=>person.age,()=>person.car],(newValue,oldValue)=>{
    console.log('属性被修改了',newValue,oldValue);
    
  },{deep:true})
</script>